<template>
  <el-dialog
    :title="rowDirectoryName !== '' ? '修改目录' : '新增目录'"
    :visible="showDialog"
    width="400px"
    @close="closeDialog"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item v-if="!flag" label="所属学科" prop="value">
        <el-select v-model="form.value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="input">
        <el-input v-model="form.input" placeholder="请输入目录名称" />
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submitBtn">确认</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {
  addDirectorysApi,
  editDirectorysApi,
  getSubjectsSimpleApi
} from '@/api/subjects'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    rowDirectoryName: {
      type: String,
      default: ''
    },
    rowId: {
      type: Number,
      default: 0
    },
    rowSubjectId: {
      type: Number,
      required: true
    },
    flag: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      rules: {
        input: [
          {
            required: true,
            message: '目录名称不能为空',
            trigger: ['blur', 'change']
          }
        ],
        value: [
          { required: true, message: '所属学科不能为空', trigger: 'blur' }
        ]
      },
      form: {
        input: '',
        value: ''
      },
      subjectData: {
        id: 0,
        subjectID: '',
        directoryName: ''
      },
      options: []
    }
  },
  watch: {
    rowDirectoryName(newName) {
      this.form.input = newName
    },
    rowSubjectId(newName) {
      if (this.rowSubjectId !== 0) {
        this.form.value = newName
      }
    }
  },
  created() {
    this.getSubjectsSimple()
  },
  methods: {
    // 获取学科简单列表
    async getSubjectsSimple() {
      const { data } = await getSubjectsSimpleApi()
      this.options = data
    },
    async submitBtn() {
      if (this.rowDirectoryName) {
        // 修改目录
        this.subjectData.id = this.rowId
        this.subjectData.subjectID = this.form.value
        this.subjectData.directoryName = this.form.input
        await editDirectorysApi(this.subjectData)
        this.$message.success('修改目录成功')
      } else {
        // 拿到query传来的id值
        if (this.$route.query.id) {
          this.form.value = this.$route.query.id
        }
        console.log(this.$route.query.id)
        console.log(this.form.value)

        // 添加目录
        await addDirectorysApi(this.form.value, this.form.input)
        this.$message.success('新增目录成功')
      }
      this.closeDialog()
    },
    closeDialog() {
      this.$emit('update:showDialog', false)
      this.$emit('getDirectorysListFn')
      this.form = {
        input: '',
        value: ''
      }
    }
  }
}
</script>

<style scoped>
span {
  display: inline-block;
  font-weight: 700;
  width: 80px;
}
</style>
